<!DOCTYPE html>
<html lang="en">
<head>
    <script src="/static/js/dev.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--bootstrap插件-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!--    <link href="/static/plugin/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>-->
    <link href="/static/plugin/element-ui/element-ui.css" rel="stylesheet"/>
    <!--字体插件-->
    <link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <!--common-->
    <link href="/static/css/common.css" rel="stylesheet"/>
    <link href="/static/css/common-element-plus.css" rel="stylesheet"/>

    <title>代码生成V4</title>
    <style>

    </style>
    <style>

        /*jo-el表格栏*/
        .jo-el-table-bar {

        }

        /*jo-el表格栏-表格数据栏*/
        .jo-el-table-data-bar {

        }

        /*jo-el表格栏-分页栏*/
        .jo-el-table-page-bar {
            padding: 5px 5px;
            border: #EBEEF5 solid 1px;
            border-top: none;
        }

        /*字段非空样式*/
        .field-not-null {
            color: red;
        }

        .el-main {
            --el-main-padding: 0px;
        }

        /*预览表单项*/
        .preview-col-item{
            border: #ccc dashed 1px;
            border-radius: 2px;
            cursor: pointer;
        }
        /*预览表单项被选中*/
        .preview-col-item-active{
            border: #409EFF solid 1px;
        }
        /*预览表单项被选中下的操作条*/
        .preview-col-item-active>.preview-col-oper{
            border-top: #409EFF solid 1px;
        }
        /*预览表单项悬浮样式*/
        .preview-col-item:not(.preview-col-item-active):hover{
            border: #606266 dashed 1px;
        }
        /*预览表单项悬浮下的操作条样式*/
        .preview-col-item:not(.preview-col-item-active):hover>.preview-col-oper{
            border-top: #606266 dashed 1px;
        }



        /*预览版表单项操作条样式*/
        .preview-col-oper {
            padding: 0px 10px;
            border-top: #ccc dashed 1px;
            background-color: #eeeeee;
            cursor: pointer;
        }




        /*预览表单项拖拽时的定位提示*/
        .move-col-after{
            border-right: #E6A23C solid 5px;
        }
        /*预览表单项拖拽时的定位提示*/
        .move-col-before{
            border-left: #E6A23C solid 5px;
        }
    </style>
</head>
<body class="skin-default">
<div id="app" class="element-app-box">
    <!--    <el-row :gutter="15">-->
    <!--        <el-col :span="24">-->
    <!--            <div class="grid-content">-->

    <!--            </div>-->
    <!--        </el-col>-->
    <!--    </el-row>-->
    <el-row :gutter="15">
        <el-col :span="24">
            <el-tabs model-value="0" class="demo-tabs">
                <el-tab-pane label="基本信息" name="0">
                    <el-form :inline="false" :model="formData" label-position="right" label-width="100px">
                        <el-row :gutter="15">
                            <el-col :span="12">
                                <el-form-item label="数 据 表">
                                    <jo-el-data url="{URL_CMS}cms/db/getTableList">
                                        <template #default="scope">
                                            <el-select v-model="formData.tableName" placeholder="请选择数据表"
                                                       @change="tableChange">
                                                <el-option :label="item.id" :value="item.id"
                                                           v-for="item in scope.data"></el-option>
                                            </el-select>
                                        </template>
                                    </jo-el-data>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="实体类名">
                                    <el-input v-model="formData.className"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="表(类)注 释">
                                    <el-input v-model="formData.tableRemark"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="链路追踪">
                                    <el-radio-group v-model="formData.logService">
                                        <el-radio label="1">完整启用</el-radio>
                                        <el-radio label="2">仅Web入口</el-radio>
                                        <el-radio label="0">不启用</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="包　　名">
                                    <el-input v-model="formData.packageName"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="模 块 名">
                                    <el-input v-model="formData.moduleName"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="保存路径">
                                    <el-input v-model="formData.savePath"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="服务域名">
                                    <jo-el-data url="{URL_CMS}cms/genMain/domainList">
                                        <template #default="scope">
                                            <el-select v-model="formData.webDomain" placeholder="请选择服务域名">
                                                <el-option :label="item.text" :value="item.domain"
                                                           v-for="item in scope.data"></el-option>
                                            </el-select>
                                        </template>
                                    </jo-el-data>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="备　　注">
                                    <el-input v-model="formData.name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="作　　者">
                                    <el-input v-model="formData.author"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="其他功能">
                                    <el-checkbox-group v-model="formData.extendTagArr">
                                        <el-checkbox label="tag_import">支持导入</el-checkbox>
                                        <el-checkbox label="tag_export">支持导出</el-checkbox>
                                        <el-checkbox label="tag_BaseDO">继承BaseDO模型</el-checkbox>
                                        <el-checkbox label="tag_fill_BaseDO">继承并自动填充BaseDO</el-checkbox>
                                        <el-checkbox label="tag_DbSortDO">继承DbSortDO</el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                            </el-col>
                        </el-row>

                    </el-form>
                </el-tab-pane>

                <el-tab-pane label="字段配置" name="1">
                    <el-table :data="columnList" border header-cell-class-name="jo-el-table-header"
                              :height="defaultHeight">
                        <el-table-column prop="fieldName" label="字段" width="">
                            <template #default="scope">
                                <span :class="{'field-not-null' : scope.row.fieldNotNull==1}">{{scope.row.fieldName}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="fieldRemark" label="字段说明" width=""></el-table-column>
                        <el-table-column prop="fieldType" label="字段类型" width="150">
                            <template #default="scope">
                                {{scope.row.fieldType}}
                                <span v-if="scope.row.fieldLength">({{scope.row.fieldLength}})</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="attrName" label="Java属性">
                            <template #default="scope">
                                <el-input v-model="scope.row.attrName" size="small"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="javaType" label="Java类型">
                            <template #default="scope">
                                <el-input v-model="scope.row.javaType" size="small"></el-input>
                            </template>
                        </el-table-column>


                        <el-table-column prop="supportImport" label="支持导入">
                            <template #default="scope">
                                <el-switch v-model="scope.row.supportImport" active-value="1"
                                           inactive-value="0"></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column prop="supportExport" label="支持导出">
                            <template #default="scope">
                                <el-switch v-model="scope.row.supportExport" active-value="1"
                                           inactive-value="0"></el-switch>
                            </template>
                        </el-table-column>

                    </el-table>
                </el-tab-pane>

                <el-tab-pane label="视图配置" name="2">
                    <el-form :model="formData" label-position="right" label-width="100px">
                        <el-row :gutter="15">
                            <el-col :span="12">
                                <el-form-item label="表格首列：">
                                    <jo-el-data url="{URL_CMS}cms/genV4/getFirstColumnTypeList">
                                        <template #default="scope">
                                            <el-radio-group v-model="formData.tableFirstColumnType">
                                                <el-radio :label="item.key" v-for="item in scope.data">{{item.value}}
                                                </el-radio>
                                            </el-radio-group>
                                        </template>
                                    </jo-el-data>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="表格操作列：">
                                    <el-checkbox-group v-model="formData.extendTagArr">
                                        <el-checkbox label="tag_view_edit">编辑</el-checkbox>
                                        <el-checkbox label="tag_view_del">删除</el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <el-table :data="columnListForView" border header-cell-class-name="jo-el-table-header"
                              :height="defaultHeight">
                        <el-table-column type="index" label="#" min-width="50" fixed="left" align="center"
                                         header-align="center"></el-table-column>
                        <el-table-column prop="fieldName" label="字段" min-width="160" fixed="left">
                            <template #default="scope">
                                <div :class="{'field-not-null' : scope.row.fieldNotNull==1}">
                                    <div>{{scope.row.fieldName}}</div>
                                    <div>{{scope.row.fieldRemark}}</div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="fieldType" label="字段类型" width="150">
                            <template #default="scope">
                                {{scope.row.fieldType}}
                                <span v-if="scope.row.fieldLength">({{scope.row.fieldLength}})</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="attrName" label="Java属性" min-width="120"></el-table-column>


                        <el-table-column prop="viewShow" label="视图展示" width="100">
                            <template #default="scope">
                                <el-switch v-model="scope.row.viewShow" active-value="1" inactive-value="0"></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column prop="headerTitle" label="表头标题" min-width="120">
                            <template #default="scope">
                                <el-input v-model="scope.row.headerTitle" size="small"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="viewNum" label="展示顺序" width="150">
                            <template #default="scope">
                                <el-input-number v-model="scope.row.viewNum" :min="1" :step="5"
                                                 size="small"></el-input-number>
                            </template>
                        </el-table-column>


                        <el-table-column prop="supportSort" label="列排序">
                            <template #default="scope">
                                <el-switch v-model="scope.row.supportSort" active-value="1"
                                           inactive-value="0"></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column prop="asCondition" label="支持搜索" width="100">
                            <template #default="scope">
                                <el-select v-model="scope.row.asCondition" size="small">
                                    <el-option :value="item.key" :label="item.value"
                                               v-for="item in asConditionTypeList"></el-option>
                                </el-select>
                            </template>
                        </el-table-column>

                        <el-table-column prop="columnWidth" label="列宽" width="100">
                            <template #default="scope">
                                <el-input v-model="scope.row.columnWidth" size="small"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="viewValueFormat" label="内容格式" width="120">
                            <template #default="scope">
                                <el-select v-model="scope.row.viewValueFormat" size="small">
                                    <el-option :value="item.key" :label="item.value"
                                               v-for="item in showFormatList"></el-option>
                                </el-select>
                            </template>
                        </el-table-column>

                        <el-table-column prop="headerAlign" label="表头align" width="135">
                            <template #default="scope">
                                <el-radio-group v-model="scope.row.headerAlign" size="small">
                                    <el-radio-button label="left">左</el-radio-button>
                                    <el-radio-button label="center">中</el-radio-button>
                                    <el-radio-button label="right">右</el-radio-button>
                                </el-radio-group>
                            </template>
                        </el-table-column>
                        <el-table-column prop="valueAlign" label="内容align" width="135">
                            <template #default="scope">
                                <el-radio-group v-model="scope.row.valueAlign" size="small">
                                    <el-radio-button label="left">左</el-radio-button>
                                    <el-radio-button label="center">中</el-radio-button>
                                    <el-radio-button label="right">右</el-radio-button>
                                </el-radio-group>
                            </template>
                        </el-table-column>
                        <el-table-column prop="columnFixed" label="固定列" width="135">
                            <template #default="scope">
                                <el-radio-group v-model="scope.row.columnFixed" size="small">
                                    <el-radio-button label="left">左</el-radio-button>
                                    <el-radio-button label="no">无</el-radio-button>
                                    <el-radio-button label="right">右</el-radio-button>
                                </el-radio-group>
                            </template>
                        </el-table-column>
                        <el-table-column prop="headerTips" label="表头提示" width="120">
                            <template #default="scope">
                                <el-input v-model="scope.row.headerTips" size="small"></el-input>
                            </template>
                        </el-table-column>

                    </el-table>
                </el-tab-pane>

                <el-tab-pane label="表单配置" name="3">
                    <el-container style="padding: 0px;">
                        <el-main>
                            <el-table :data="columnListForForm" border header-cell-class-name="jo-el-table-header"
                                      :height="defaultHeight">
                                <el-table-column type="index" label="#" min-width="50" align="center"
                                                 header-align="center"></el-table-column>
                                <el-table-column prop="fieldName" label="字段" min-width="160">
                                    <template #default="scope">
                                        <div :class="{'field-not-null' : scope.row.fieldNotNull==1}">
                                            <div>{{scope.row.fieldName}}</div>
                                            <div>{{scope.row.fieldRemark}}</div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="fieldType" label="字段类型" width="150">
                                    <template #default="scope">
                                        {{scope.row.fieldType}}
                                        <span v-if="scope.row.fieldLength">({{scope.row.fieldLength}})</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="attrName" label="Java属性" min-width="120"></el-table-column>
                                <el-table-column prop="controlTitle" label="表单项标题" min-width="120">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.controlTitle" size="small"></el-input>
                                    </template>
                                </el-table-column>


                                <el-table-column prop="formShow" label="表单展示" width="100">
                                    <template #default="scope">
                                        <el-switch v-model="scope.row.formShow" active-value="1"
                                                   inactive-value="0"></el-switch>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="formNum" label="显示顺序" width="150">
                                    <template #default="scope">
                                        <el-input-number v-model="scope.row.formNum" :min="1" :step="5"
                                                         size="small"></el-input-number>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="controlWidth" label="栅格宽度" width="150">
                                    <template #default="scope">
                                        <el-input-number v-model="scope.row.controlWidth" size="small" :min="1"
                                                         :max="24"></el-input-number>
                                    </template>
                                </el-table-column>

                                <el-table-column prop="controlType" label="控件类型" width="100">
                                    <template #default="scope">
                                        <el-select v-model="scope.row.controlType" size="small">
                                            <el-option :value="item.key" :label="item.value"
                                                       v-for="item in controlTypeList"></el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="150">
                                    <template #default="scope">
                                        <el-button v-if="!(curCol && curCol.fieldName==scope.row.fieldName)" type="text"
                                                   @click="colDetail(scope.row)">详情
                                        </el-button>
                                        <el-button v-if="curCol && curCol.fieldName==scope.row.fieldName" type="text"
                                                   @click="colDetail(scope.row)"><span style="color: red;">详情</span>
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-main>

                        <el-aside>
                            <el-scrollbar>
                                <div style="padding: 0px 15px;">
                                    <div v-if="curCol" style="font-weight: bold;padding-bottom: 8px;">
                                        字段：{{curCol.fieldName}}
                                    </div>
                                    <el-form label-width="120px" v-if="curCol" label-position="top">
                                        <el-form-item label="表单控件类型">
                                            <el-select v-model="curCol.controlType">
                                                <el-option :value="item.key" :label="item.value"
                                                           v-for="item in controlTypeList"></el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="placeholder">
                                            <el-input v-model="curCol.controlPlaceholder"></el-input>
                                        </el-form-item>
                                        <template v-if="curCol && curCol.controlConfig">
                                            <el-form-item label="数据URL">
                                                <el-input v-model="curCol.controlConfig.dataUrl"
                                                          placeholder="数据URL"></el-input>
                                            </el-form-item>
                                            <el-form-item label="值字段">
                                                <el-input v-model="curCol.controlConfig.keyField"
                                                          placeholder="值字段"></el-input>
                                            </el-form-item>
                                            <el-form-item label="文本字段">
                                                <el-input v-model="curCol.controlConfig.valueField"
                                                          placeholder="文本字段"></el-input>
                                            </el-form-item>
                                        </template>
                                    </el-form>
                                </div>
                            </el-scrollbar>
                        </el-aside>
                    </el-container>

                </el-tab-pane>

                <el-tab-pane label="表单配置(预览版)" name="4">
                    <el-container style="padding: 0px;border: 1px solid #eee" :style="{'height' : windowHeight - 85 + 'px'}">
                        <el-aside>
                            <div style="padding: 0px 15px;">
                                <el-divider border-style="dashed">可选字段</el-divider>
                                <template v-for="item in columnListForForm">
                                    <div style="border: #ccc dashed 1px;padding: 10px;border-radius: 2px;margin-bottom: 10px;display: flex;justify-content: space-between;align-items: center;"
                                         v-if="item.formShow=='0'">
                                        <el-tag effect="plain">{{item.attrName}} : {{item.controlTitle}}</el-tag>
<!--                                        <el-tag effect="dark">{{item.attrName}}</el-tag>-->
<!--                                        <el-divider border-style="dashed" style="margin-bottom: 5px;margin-top: 5px;"></el-divider>-->
<!--                                        表单展示：-->
                                        <el-switch v-model="item.formShow" active-value="1" inactive-value="0"></el-switch>
                                    </div>
                                </template>
                            </div>
                        </el-aside>
                        <el-main style="border-left: 1px solid #eee;border-right: 1px solid #eee;">
                            <el-scrollbar wrap-class="previewBoxScroll">
                                <el-form :label-width="formData.formTitleWidth" :label-position="formData.formTitlePosition">
                                    <div style="padding: 7.5px;">
                                        <el-row :gutter="10" class="jo-el-row-vertical-gutter">
                                            <template v-for="item in columnListForFormDrag">
                                                <el-col :span="item.controlWidth" v-if="item.formShow=='1'">
                                                    <div draggable="true"
                                                         ondragstart="moveColumnStart()"
                                                         ondrag="moveColumnIng()"
                                                         ondragend="moveColumnEnd()"
                                                         class="preview-col-item"
                                                         :class="{'preview-col-item-active' : curCol && curCol.fieldName == item.fieldName}"
                                                         @click="colDetail(item)"
                                                         :dataColId="item.fieldName">
                                                        <div style="padding: 10px;padding-bottom: 0px;">
                                                            <el-form-item :label="item.controlTitle">
                                                                <template v-if="item.controlType=='input'">
                                                                    <el-input :placeholder="item.controlPlaceholder"></el-input>
                                                                </template>
                                                                <template v-else-if="item.controlType=='date'">
                                                                    <el-date-picker type="date" :placeholder="item.controlPlaceholder" />
                                                                </template>
                                                                <template v-else-if="item.controlType=='time'">
                                                                    <el-date-picker type="datetime" :placeholder="item.controlPlaceholder" />
                                                                </template>
                                                                <template v-else-if="item.controlType=='select'">
                                                                    <el-select :placeholder="item.controlPlaceholder">
                                                                        <el-option value="" label=""></el-option>
                                                                    </el-select>
                                                                </template>
                                                                <template v-else-if="item.controlType=='textarea'">
                                                                    <el-input :rows="2" type="textarea" :placeholder="item.controlPlaceholder"></el-input>
                                                                </template>
                                                                <template v-else-if="item.controlType=='radio'">
                                                                    <el-radio-group>
                                                                        <el-radio :label="3">Option A</el-radio>
                                                                        <el-radio :label="6">Option B</el-radio>
                                                                    </el-radio-group>
                                                                </template>
                                                                <template v-else-if="item.controlType=='checkbox'">
                                                                    <el-checkbox-group>
                                                                        <el-checkbox label="Option A" ></el-checkbox>
                                                                        <el-checkbox label="Option B" ></el-checkbox>
                                                                    </el-checkbox-group>
                                                                </template>
                                                                <template v-else-if="item.controlType=='label'">
                                                                    <el-tag>label</el-tag>
                                                                </template>
                                                                <template v-else="">
                                                                    <el-input :placeholder="item.controlPlaceholder"></el-input>
                                                                </template>
                                                            </el-form-item>
                                                        </div>
                                                        <div class="preview-col-oper">
                                                            <el-form :inline="true" label-position="left" size="small">
                                                                <el-form-item label="">
                                                                    <el-switch v-model="item.formShow" active-value="1" inactive-value="0"></el-switch>
                                                                </el-form-item>
<!--                                                                <el-form-item label="顺序">-->
<!--                                                                    <el-input-number v-model="item.formNum" :min="1" :step="5" size="small"></el-input-number>-->
<!--                                                                </el-form-item>-->
                                                                <el-form-item label="">
                                                                    <el-input-number v-model="item.controlWidth" size="small" :min="1" :max="24"></el-input-number>
                                                                </el-form-item>
                                                                <el-form-item label="">
                                                                    <el-select v-model="item.controlType" size="small">
                                                                        <el-option :value="item.key" :label="item.value"
                                                                                   v-for="item in controlTypeList"></el-option>
                                                                    </el-select>
                                                                </el-form-item>
                                                            </el-form>
                                                        </div>
                                                    </div>
                                                </el-col>
                                            </template>

                                        </el-row>

<!--                                        <el-divider border-style="dashed">下方是未勾选展示的字段</el-divider>-->

                                        <!--                                <el-row :gutter="10" class="jo-el-row-vertical-gutter">-->
                                        <!--                                    <template v-for="item in columnListForForm">-->
                                        <!--                                        <el-col :span="item.controlWidth" v-if="item.formShow=='0'">-->
                                        <!--                                            <div style="border: #ccc dashed 1px;padding: 10px;border-radius: 2px;">-->
                                        <!--                                                <el-form-item :label="item.controlTitle">-->
                                        <!--                                                    <el-input></el-input>-->
                                        <!--                                                </el-form-item>-->
                                        <!--                                                <el-divider border-style="dashed" style="margin-bottom: 5px;margin-top: 2px;"></el-divider>-->
                                        <!--                                                表单展示：<el-switch v-model="item.formShow" active-value="1" inactive-value="0"></el-switch>-->
                                        <!--                                            </div>-->
                                        <!--                                        </el-col>-->
                                        <!--                                    </template>-->
                                        <!--                                </el-row>-->
                                    </div>

                                </el-form>
                            </el-scrollbar>
                        </el-main>
                        <el-aside>
                            <div style="padding: 0px 15px;">
                                <el-tabs model-value="first">
                                    <el-tab-pane label="表单项配置" name="first">
                                        <el-scrollbar>
                                            <el-form label-width="120px" v-if="curCol" label-position="top">
                                                <el-form-item label="标题">
                                                    <el-input v-model="curCol.controlTitle"></el-input>
                                                </el-form-item>
                                                <el-form-item label="placeholder">
                                                    <el-input v-model="curCol.controlPlaceholder"></el-input>
                                                </el-form-item>
                                                <el-form-item label="宽度" style="margin-bottom: 30px;">
<!--                                                    <el-input-number v-model="curCol.controlWidth" :min="1" :max="24"></el-input-number>-->
                                                    <el-slider v-model="curCol.controlWidth" :min="1" :max="24" size="small"
                                                               :marks="{1:'1',6:'6',12:'12',18:'18',24:'24'}" style="width: 230px;margin-left: 12px;"></el-slider>
                                                </el-form-item>
                                                <el-form-item label="控件类型">
                                                    <el-select v-model="curCol.controlType">
                                                        <el-option :value="item.key" :label="item.value"
                                                                   v-for="item in controlTypeList"></el-option>
                                                    </el-select>
                                                </el-form-item>
                                                <template v-if="curCol && curCol.controlConfig">

                                                    <el-form-item label="选项数据源" v-if="showOptionDataSource(curCol.controlType)">
                                                        <div>
                                                            <el-radio-group v-model="curCol.controlConfig.dataType" >
                                                                <el-radio-button label="static">静态数据</el-radio-button>
                                                                <el-radio-button label="url">URL</el-radio-button>
                                                                <el-radio-button label="dict">字典</el-radio-button>
                                                            </el-radio-group>
                                                        </div>

                                                        <div style="padding: 10px 0px;" v-if="curCol.controlConfig.dataType=='static'">
                                                            <el-row v-for="(op, opIdx) in curCol.controlConfig.optionItemList" style="margin-bottom: 5px;">
                                                                <el-col :span="10">
                                                                    <el-input v-model="op.key" placeholder="值" size="small"></el-input>
                                                                </el-col>
                                                                <el-col :span="1"></el-col>
                                                                <el-col :span="10">
                                                                    <el-input v-model="op.value" placeholder="文案" size="small"></el-input>
                                                                </el-col>
                                                                <el-col :span="3">
                                                                    <div style="text-align: center;">
                                                                        <el-button type="danger" circle size="small" @click="deleteOptionItem(opIdx)"><i class="fa fa-minus" aria-hidden="true"></i></el-button>
                                                                    </div>
                                                                </el-col>
                                                            </el-row>
                                                            <div style="clear: both;display: block;width: 200px;">
                                                                &nbsp;<el-button type="text" size="small" @click="addOptionItem">添加选项</el-button>
                                                            </div>
                                                        </div>
                                                        <div style="padding: 10px 0px;" v-if="curCol.controlConfig.dataType=='url'">
                                                            <el-form-item style="margin-bottom: 5px;">
                                                                <el-input v-model="curCol.controlConfig.dataUrl" placeholder="数据Url" size="small">
                                                                    <template #prepend>URL</template>
                                                                </el-input>
                                                            </el-form-item>
                                                            <el-form-item style="margin-bottom: 5px;">
                                                                <el-input v-model="curCol.controlConfig.keyField" placeholder="值字段" size="small">
                                                                    <template #prepend>值字段</template>
                                                                </el-input>
                                                            </el-form-item>
                                                            <el-form-item>
                                                                <el-input v-model="curCol.controlConfig.valueField" placeholder="文本字段" size="small">
                                                                    <template #prepend>文本字段</template>
                                                                </el-input>
                                                            </el-form-item>
                                                        </div>
                                                        <div style="padding: 10px 0px;" v-if="curCol.controlConfig.dataType=='dict'">
                                                            暂无字典~
                                                        </div>

                                                    </el-form-item>

                                                    <el-form-item label="表单校验">
                                                        {{curCol.v_checkRuleList}}
                                                        <el-select v-model="curCol.v_checkRuleTypeList"
                                                                   multiple
                                                                   collapse-tags
                                                                   collapse-tags-tooltip
                                                                   @change="checkRuleListChange">
                                                            <el-option :value="item.key" :label="item.value" v-for="item in controlCheckList"></el-option>
                                                        </el-select>
                                                        <div v-for="check in curCol.controlConfig.checkRuleList"
                                                             style="margin-top: 8px;border: #ccc dashed 1px;padding: 8px;line-height: 1.7;">
                                                            <el-tag style="margin-bottom: 5px;">{{getCheckRuleName(check.checkType)}}</el-tag>
                                                            <el-input v-model="check.errorTips" placeholder="错误提示文案" size="small" style="margin-bottom: 5px;"></el-input>
                                                            <el-input v-if="check.checkType=='ErrReg'" v-model="check.checkReg" :row="2" placeholder="正则表达式" size="small" style="margin-bottom: 5px;"></el-input>
                                                            <template v-if="check.checkType=='ErrLength' || check.checkType=='ErrNumber'">
                                                                <el-input v-model="check.min" placeholder="下限" size="small" style="width: 40%" style="margin-bottom: 5px;"></el-input>
                                                                ~
                                                                <el-input v-model="check.max" placeholder="上限" size="small" style="width: 40%" style="margin-bottom: 5px;"></el-input>
                                                            </template>
                                                        </div>
                                                    </el-form-item>
                                                </template>

                                            </el-form>
                                        </el-scrollbar>
                                    </el-tab-pane>
                                    <el-tab-pane label="全局配置" name="second">
                                        <el-scrollbar>
                                            <el-form label-position="top" label-width="140px">
                                                <el-form-item label="表单项标题位置">
                                                    <el-radio-group v-model="formData.formTitlePosition">
                                                        <el-radio-button label="left" ></el-radio-button>
                                                        <el-radio-button label="top"  ></el-radio-button>
                                                        <el-radio-button label="right"  ></el-radio-button>
                                                    </el-radio-group>
                                                </el-form-item>
                                                <el-form-item label="表单项标题宽度">
                                                    <el-input v-model="formData.formTitleWidth"></el-input>
                                                </el-form-item>
                                            </el-form>
                                        </el-scrollbar>
                                    </el-tab-pane>
                                </el-tabs>
                            </div>
                        </el-aside>
                    </el-container>


                </el-tab-pane>

            </el-tabs>
        </el-col>
    </el-row>
</div>


<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--layer-->
<script src="/static/plugin/layer/layer.js"></script>
<!--vue-->
<script src="/static/plugin/vue/v3/vue.global.js"></script>
<script src="/static/plugin/element-ui/element-ui.js"></script>
<script src="/static/plugin/element-ui/locale/zh-cn.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--common-->
<script src="/static/js/common.js"></script>
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-adapt-element-plus.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<script src="/static/plugin/jo/jo-page-element-plus.js"></script>
<script type="text/javascript">

    const app = Vue.createApp({
        data: function () {
            return {
                windowHeight: $(window).height(),
                defaultHeight: $(window).height() - 160,
                // 表单详情
                formData: {},
                // 字段集合
                columnList: [],
                // 当前选中字段
                curCol: null,
                // 格式集合
                showFormatList: [],
                // 查询条件类型
                asConditionTypeList: [],
                // 控件类型
                controlTypeList: [],
                // 控件表单校验规则
                controlCheckList: []
            };
        }
        , computed: {
            // 校验规则map格式
            controlCheckMap() {
                var map = {};
                jo.forEach(this.controlCheckList, function (item) {
                    map[item.key] = item.value;
                });
                return map;
            },
            // 视图配置
            columnListForView() {
                var arr = [];
                jo.forEach(this.columnList, function (item, i) {
                    arr.push(item);
                });
                jo.sort(arr, function (a, b) {
                    var one = jo.getDefVal(a.viewNum, 0);
                    var two = jo.getDefVal(b.viewNum, 0);
                    if (a.viewShow == 0) {
                        one += 99999999;
                    }
                    if (b.viewShow == 0) {
                        two += 99999999;
                    }
                    return one < two;
                });
                return arr;
            },
            // 表单配置
            columnListForForm() {
                var arr = [];
                jo.forEach(this.columnList, function (item, i) {
                    arr.push(item);
                });
                jo.sort(arr, function (a, b) {
                    var one = jo.getDefVal(a.formNum, 0);
                    var two = jo.getDefVal(b.formNum, 0);
                    if (a.formShow == 0) {
                        one += 99999999;
                    }
                    if (b.formShow == 0) {
                        two += 99999999;
                    }
                    return one < two;
                });
                return arr;
            },
            // 拖拽版表单配置
            columnListForFormDrag() {
                var arr = [];
                jo.forEach(this.columnList, function (item, i) {
                    arr.push(item);
                    // 处理虚拟字段, 用于交互使用, 后端不存储
                    if (item.controlConfig && item.controlConfig.checkRuleList) {
                        if (!item.v_checkRuleTypeList || item.v_checkRuleTypeList.length === 0) {
                            item.v_checkRuleTypeList = [];
                            // 只有第一次才push
                            jo.forEach(item.controlConfig.checkRuleList, function (rule) {
                                item.v_checkRuleTypeList.push(rule.checkType);
                            });
                            // console.info('初始化v_checkRuleTypeList --' + item.attrName + ' %o', item.v_checkRuleTypeList);
                        }
                    }
                });
                jo.sort(arr, function (a, b) {
                    var one = jo.getDefVal(a.formNum, 0);
                    var two = jo.getDefVal(b.formNum, 0);
                    if (a.formShow == 0) {
                        one += 99999999;
                    }
                    if (b.formShow == 0) {
                        two += 99999999;
                    }
                    return one < two;
                });
                return arr;
            }
        }
        , methods: {
            // 判断是否显示控件数据源
            showOptionDataSource(controlType) {
                return controlType == 'select'
                    || controlType == 'radio'
                    || controlType == 'checkbox';
            },
            // 校验规则多选框变更
            checkRuleListChange(val) {
                this.curCol.v_checkRuleTypeList = val;
                // 原先的规则映射
                var oldRuleMap = {};
                jo.forEach(this.curCol.controlConfig.checkRuleList, function (item) {
                    oldRuleMap[item.checkType] = item;
                });

                // 新校验规则对象集合
                var arr = [];
                jo.forEach(this.curCol.v_checkRuleTypeList, function (item) {
                    var old = oldRuleMap[item];
                    if (old) {
                        arr.push(old);
                    } else {
                        var check = {checkType: item, checkReg: '', errorTips: ''};
                        if (item === 'ErrMail') {
                            check.errorTips = '请输入正确的邮箱格式';
                        } else if (item === 'ErrPhone') {
                            check.errorTips = '请输入正确的手机号格式';
                        } else {
                            check.errorTips = '请输入符合要求的内容';
                        }
                        arr.push(check);
                    }
                });
                this.curCol.controlConfig.checkRuleList = arr;
            },
            // 获取规则名称
            getCheckRuleName(checkType) {
                var name = this.controlCheckMap[checkType];
                return name ? name : checkType;
            },
            // 删除数据项
            deleteOptionItem(idx) {
                var arr = [];
                jo.forEach(this.curCol.controlConfig.optionItemList, function (item, i) {
                    if (idx === i) {
                        return;
                    }
                    arr.push(item);
                });
                this.curCol.controlConfig.optionItemList = arr;
            },
            // 添加数据项
            addOptionItem() {
                if (!this.curCol.controlConfig.optionItemList) {
                    this.curCol.controlConfig.optionItemList = [];
                }
                this.curCol.controlConfig.optionItemList.push({key: '', value: ''});
            },
            // 拖拽结束后调整位置, 参数: 被拖拽对象, 锚定对象, 移动到锚定对象的后面after或者前面before
            dragPosition(target, posItem, type) {
                var num = 0;
                jo.forEach(this.columnListForForm, function (item, i) {
                    item.formNum = (i + 1) * 10;
                    // 找到锚定对象
                    if ($(posItem).attr('dataColId') == item.fieldName) {
                        if (type === 'after') {
                            num = item.formNum + 5;
                        } else {
                            num = item.formNum - 5;
                        }
                    }
                });
                if (num) {
                    jo.forEach(this.columnList, function (item, i) {
                        // 找到锚定对象
                        if ($(target).attr('dataColId') == item.fieldName) {
                            item.formNum = num;
                        }
                    });
                }
            },
            // 选中字段
            colDetail(col) {
                this.curCol = col;
            },
            // 表选择
            tableChange(val) {
                var _this = this;
                jo.postAjax("{URL_CMS}cms/genV4/initGenByTableName", {tableName: val}, function (json) {
                    if (json && json.code == 0) {
                        _this.formData = json._data;
                        _this.columnList = json._data.colList;
                        _this.curCol = null;
                    }
                }, true);
            },
            // 枚举数据初始化
            init() {
                var _this = this;
                jo.postAjax("{URL_CMS}cms/genV4/getShowFormatList", {}, function (json) {
                    if (json && json.code == 0) {
                        _this.showFormatList = json.data;
                    }
                }, true);
                jo.postAjax("{URL_CMS}cms/genV4/getAsConditionTypeList", {}, function (json) {
                    if (json && json.code == 0) {
                        _this.asConditionTypeList = json.data;
                    }
                }, true);
                jo.postAjax("{URL_CMS}cms/genV4/getControlTypeList", {}, function (json) {
                    if (json && json.code == 0) {
                        _this.controlTypeList = json.data;
                    }
                }, true);
                jo.postAjax("{URL_CMS}cms/genV4/getControlCheckList", {}, function (json) {
                    if (json && json.code == 0) {
                        _this.controlCheckList = json.data;
                    }
                }, true);
            }
        }
        , mounted() {
            this.init();
        }
        , setup() {

        }
    });
    app.use(ElementPlus, {locale: ElementPlusLocaleZhCn});
    joEl.component(app);

    var appVM = app.mount("#app");


    //大写格式转驼峰,首字母小写
    function up2Tuo(str) {
        if (jo.isValid(str)) {
            var arr = str.split("_");
            if (arr.length > 1) {
                var s = arr[0].toLowerCase();
                for (var i = 1; i < arr.length; i++) {
                    s += arr[i].substring(0, 1).toUpperCase() + arr[i].substring(1).toLowerCase();
                }
                return s;
            } else {
                return str.toLowerCase();
            }
        } else {
            return "";
        }
    }

    //单词首字母大写
    function wordOne2Up(str) {
        return str.substring(0, 1).toUpperCase() + str.substring(1);
    }

    //单词首字母小写
    function wordOne2Low(str) {
        return str.substring(0, 1).toLowerCase() + str.substring(1);
    }

    // 拖拽表单项开始
    function moveColumnStart(col) {
        // 当前拖拽对象
        var target = event.target;
    }
    // 拖拽表单项过程中
    function moveColumnIng() {
        moveCol(event);
    }
    // 拖拽表单项结束
    function moveColumnEnd() {
        // 清空位置提示
        $('.preview-col-item').removeClass('move-col-before');
        $('.preview-col-item').removeClass('move-col-after');
        moveCol(event, function (target, item, type) {
            appVM.dragPosition(target, item, type);
            // 清空位置提示
            $('.preview-col-item').removeClass('move-col-before');
            $('.preview-col-item').removeClass('move-col-after');
        });
    }

    function moveCol(event, endFunc) {
        // 获取鼠标位置(窗口绝对位置)
        var x = event.pageX;
        var y = event.pageY;

        // 无效数据过滤
        if (!x || !y) {
            jo.log('鼠标坐标无效', [x, y, event]);
            return;
        }

        // 校准鼠标位置, 加上滚动条高度就是内容位置
        var scrollTop = $('.previewBoxScroll')[0].scrollTop;
        var scrollLeft = $('.previewBoxScroll')[0].scrollLeft;
        if (scrollTop) {
            y += scrollTop;
        }
        if (scrollLeft) {
            x += scrollLeft;
        }

        // 当前拖拽对象
        var target = event.target;

        // 计算每个表单项的位置
        var left = 320;// 父容器左侧距离
        var top = 70;// 父容器右侧距离
        // 所有的表单项
        var colArr = $('.preview-col-item');
        // 为每个表单项范围
        var rangeArr = [];
        jo.forEach(colArr, function (item, idx) {
            // 获取宽高, 计算中心点
            var width = item.clientWidth;
            var height = item.clientHeight;
            var absX = item.offsetLeft + left;
            var absY = item.offsetTop + top;
            // 表单项区域范围, 左上角点的xy坐标和右下角点的xy坐标
            rangeArr.push([absX, absY, absX + width, absY + height]);
        });

        console.info(rangeArr);

        for (var i=0;i<colArr.length;i++) {
            var item = colArr[i];
            var range = rangeArr[i];
            var x1 = range[0];
            var y1 = range[1];
            var x2 = range[2];
            var y2 = range[3];
            // 判断鼠标是否在当前表单项范围内
            if (x > x1 && x < x2 && y > y1 && y < y2 && target != item) {
                // 先清空位置提示
                $('.preview-col-item').removeClass('move-col-before');
                $('.preview-col-item').removeClass('move-col-after');
                // 判断鼠标在中线左边还是右边
                var centerLineX = (x1 + x2) / 2;
                if (x > centerLineX) {
                    if (typeof endFunc == 'function') {
                        endFunc(target, item, 'after');
                    } else {
                        $(item).addClass('move-col-after');
                    }
                } else {
                    if (typeof endFunc == 'function') {
                        endFunc(target, item, 'before');
                    } else {
                        $(item).addClass('move-col-before');
                    }
                }
            }
        }
    }
</script>

</body>
</html>
